<template>
  <view class="page flexc">
    <!-- <u-sticky> -->
    <!-- :class="{show_background_color: show_background_color}"  -->
    <view class="page-navbar">
      <view class="head-nav">
        <u-navbar
          leftText="分类"
          leftIconSize="0"
          leftIconColor="#000"
          :fixed="true"
          :placeholder="true"
          bgColor="#fff"
          :autoBack="false"></u-navbar>
      </view>
      <view class="head-search">
        <u-search
          v-model="keyword"
          height="72rpx"
          bgColor="#F6F6F6"
          :showAction="false"
          :searchIconSize="28"
          searchIconColor="#000000"
          placeholderColor="#959595"
          placeholder="搜索您需要的产品名称"
          @search="handleSearch"></u-search>
      </view>
    </view>
    <view class="page-ctx flex1 over">
      <view class="page-ctx-inner flex1">
        <scroll-view
          scroll-y
          scroll-with-animation
          style="height: 100%"
          class="left-cate-view menu-scroll-view"
          :scroll-top="scrollTop">
          <view class="cate-list">
            <view
              v-for="(item, index) in categoryList"
              :key="item.id"
              class="cate-item"
              :class="[category_id == item.id ? 'cate-item-active' : '']"
              :data-current="item.id"
              @tap.stop="toggleCate(item)">
              <view class="cate-title">
                {{ item.title }}
              </view>
            </view>
          </view>
        </scroll-view>

        <scroll-view
          scroll-y
          class="right-container flex1"
          @scrolltolower="scrolltolower">
          <view class="page-view">
            <view class="class-item">
              <view class="right-cat-title">
                <!-- {{category_select.title || ''}} -->
                {{ open_search ? "搜索结果" : "为您推荐" }}
              </view>

              <view class="item-container">
                <view class="product-list">
                  <view
                    class="product-item"
                    v-for="(item, index) in products"
                    :key="index"
                    @click="toDetail(item)">
                    <view class="poster-box">
                      <image
                        class="poster"
                        :src="item.thumb"
                        mode="aspectFill"></image>
                    </view>
                    <view class="info-box">
                      <view class="title ellipsis-2">
                        {{ item.title }}
                      </view>
                      <view class="price-box flex-between">
                        <view class="price-info">{{ item.priceSale }}积分</view>
                        <view
                          class="add-box flex-center"
                          @click.stop="doAddCart(item)">
                          <image
                            src="/static/image/add.png"
                            mode="aspectFit"></image>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="load-more-box" style="margin-top: 60rpx">
                  <u-loadmore :status="loadmore_status" @loadmore="loadMore" />
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <product_sku_pop
      ref="product_sku_pop"
      position="分类"
      @confirm="confirmGuige" />

    <!-- <cartBottom ref="CartBottom" @delAll="delcarAll"></cartBottom> -->
  </view>
</template>

<script>
import product_sku_pop from "@/components/product/product_sku_pop.vue";
// import cartBottom from '@/components/cart/cart_bottom.vue'
import { mapState } from "vuex";
export default {
  components: {
    product_sku_pop,
    // cartBottom
  },
  data() {
    return {
      defaultHeadBackground: "transparent",
      headBackground: "rgba(255,255,255)", //控制顶部标题栏颜色 默认透明颜色 transparent
      keyword: "",
      open_search: false,
      //
      categoryList: [],
      products: [],
      loadmore_status: "loadmore", //loadmore  / loading / nomore
      pagination: {
        page: 1,
        page_num: 10,
      },
      category_select: {},
      category_id: "",

      scrollTop: 0,
      is_tabbar_page: false, //当前页面是否为tabbar 页面
      //
      cart_is_selected_all: false,
      cart_products: [], //产品列表
      cart_total_num: 0, //购物车总数量
      cart_total_price: 0, //购物车总金额
      showCarPoup: false,
      SelectCarList: [], //点击加入购物车的数据
    };
  },
  computed: {
    // ...mapState([
    // 	// '',
    // ])
  },
  onPageScroll(e) {
    // console.log(e)
    let percent = e.scrollTop / 50;
    percent = percent < 1 ? percent : 1;

    this.headBackground = `rgba(255,255,255,${percent})`;

    if (e.scrollTop != 0) {
      // this.headBackground = this.statusBackgroundMap[this.userRole]
    } else {
      // this.headBackground = ''
    }
  },
  onLoad(option) {
    console.log("category onLoad", option);
    // if (!this.is_tabbar_page) {
    // }
    this.query_cate({
      id: option.id || "",
    });
  },
  onShow() {
    console.log("category onShow");
    let cache_tabbar_query = uni.getStorageSync("cache_tabbar_query");
    console.log("分类初始参数 cache_tabbar_query", cache_tabbar_query);
    this.query_cart();
    this.initCategoryItem(cache_tabbar_query);
  },
  onHide() {
    console.log("category onHide");
  },
  onPullDownRefresh() {
    // setTimeout(() => {
    // 	uni.stopPullDownRefresh()
    // }, 500)
  },
  onReachBottom() {
    this.loadMore();
  },
  methods: {
    //移除缓存
    clearCacheData() {
      uni.removeStorageSync("cache_tabbar_query");
    },

    loadMore() {
      if (this.loadmore_status == "loadmore") {
        this.loadmore_status = "loading";
        this.pagination.page++;
        this.query_product();
      }
    },
    initQuery() {
      this.products = [];
      this.pagination.page = 1;
      this.loadmore_status = "loadmore";
    },

    query_cate(cateParams) {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_channel",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.categoryList = res.data || [];
          if (this.categoryList.length) {
            this.initCategoryItem(cateParams);
            this.query_product();
          }
        }
      });
    },

    initCategoryItem(params = {}) {
      console.log("初始化分类勾选 步骤", 1);
      if (!this.categoryList.length) {
        return;
      }
      console.log("初始化分类勾选 步骤", 2);

      //设置默认分类
      let prev_category_id = this.category_id;

      let category_active = null;
      if (params.id) {
        category_active = this.categoryList.find((v) => v.id == params.id);
      }
      this.category_select = category_active || this.categoryList[0] || {};
      this.category_id = this.category_select.id;

      this.$log("默认分类", this.category_select);
      //设置默认分类

      console.log("initCategoryItem prev_category_id", prev_category_id);
      console.log("initCategoryItem 查询参数 params", params);

      // 分类不一致
      if (prev_category_id != params.id) {
        this.initQuery();
        this.query_product();

        this.clearCacheData();
      }
    },

    //
    query_product() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_plist",
          ...this.pagination,
          channelId: this.category_id,
          keyword: this.keyword || "",
        },
      }).then((res) => {
        if (res.code == 200) {
          let count = res.data.count || 0;
          let list = res.data.list || [];
          this.products = this.products.concat(list);
          this.loadmore_status =
            count > this.products.length ? "loadmore" : "nomore";
        }
      });
    },
    toggleCate(item) {
      if (this.category_id == item.id) {
        return;
      }

      this.category_id = item.id;
      this.category_select = item;

      this.initQuery();
      this.query_product();
    },
    toDetail(item) {
      this.toRoute({
        path: "/product-detail",
        query: {
          id: item.inventoryId,
        },
      });
    },

    //触底事件
    scrolltolower() {
      console.log("滚动到底部 scrolltolower");
      this.loadMore();
      // if (this.loadmore_status == 'noMore') {
      // 	return false
      // }
      // this.get_list()
    },

    handleSearch() {
      this.open_search = !!this.keyword;
      this.category_id = "";
      this.initQuery();
      this.query_product();
    },

    doAddCart(item) {
      this.$log("产品加入购物车", item);
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_detail",
          inventoryId: item.inventoryId,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          data.kucun = parseInt(data.kucun);
          this.set_specifications(data);
          data.guigeList = this.list_specifications;
          this.$refs.product_sku_pop.init(data);
        }
        this.hideLoading();
      });
    },
    confirmGuige(data) {
      this.query_cart();
    },
    //设置规格
    set_specifications(data) {
      //规格列表组
      let inventorys = data.inventorys;
      let list_specifications = [];
      if (inventorys && inventorys.length) {
        inventorys.forEach((v) => {
          list_specifications.push({
            ...v,
            kucun: parseInt(v.kucun),
            keyVals: v.keyVals,
          });
        });
      } else {
        let item = data;
        list_specifications = [
          {
            status: item.product_status,
            image: item.images[0],
            inventoryId: item.inventoryId,
            keyVals: item.keyVals == "无" ? "默认" : item.keyVals,
            kucun: parseInt(item.kucun),
            priceMarket: item.priceMarket,
            priceSale: item.priceSale,
            priceSale2: item.priceSale2,
            priceSale3: item.priceSale3,
            nums1: item.nums1,
            nums2: item.nums2,
          },
        ];
      }

      //单规格商品 默认勾选
      if (list_specifications.length == 1) {
        this.select_specifications = list_specifications[0];
      } else {
        // this.select_specifications = {};
        this.select_specifications =
          list_specifications.find((v) => v.inventoryId == this.id) || {};
      }
      this.list_specifications = list_specifications;

      //规格拆分
      let skus = data.skus || {};
      if (skus && Object.keys(skus).length) {
        this.sku_mode = "多规格";
        let select_shuxing_list = [];
        Object.keys(skus).forEach((v) => {
          select_shuxing_list.push({
            key: skus[v].key,
          });
        });

        //console.log("商品规格默认 select_shuxing_list", select_shuxing_list);
        this.select_shuxing_list = select_shuxing_list;
      } else {
        this.sku_mode = "单规格";
      }
    },

    query_cart() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "gouwuche_lists",
        },
      }).then((res) => {
        if (res.code == 200) {
          let cart_total_num = 0;
          let cart_total_price = 0;
          this.cart_is_selected_all = false;
          res.data.forEach((v) => {
            v.num = parseInt(v.num);
            v.is_selected = false;
            v.keyVals = v.keyVals == "无" ? "默认" : v.keyVals;
            cart_total_num += parseInt(v.num);
            cart_total_price += parseInt(v.num) * parseFloat(v.priceSale);
          });
          this.cart_total_num = cart_total_num;
          this.cart_total_price = parseFloat(cart_total_price).toFixed(2);
          this.cart_products = res.data;

          this.$store.commit("set_vuex_cart_number", cart_total_num);

          // this.$refs.CartBottom.init(this.cart_products, this.cart_total_num);
        }
      });
    },

    delcarAll() {
      this.cart_products = []; //产品列表
      this.cart_total_num = 0; //购物车总数量
      this.cart_total_price = 0; //购物车总金额
      this.SelectCarList = [];
      this.$store.commit("set_vuex_cart_number", 0);
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f6f6f6;
}
</style>

<style lang="scss" scoped>
// 设置标题左对齐
.page-navbar ::v-deep .u-navbar__content__left {
  // display: none;
}

.page-navbar ::v-deep .u-navbar__content__title {
  flex: 1;
  padding-left: 32rpx;
  text-align: left;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
  color: #000000;
}

.page-navbar {
  background: #fff;
  background: linear-gradient(179deg, #4ec2ff 0%, #7be1dc 100%);
  background: transparent;

  &.show_background_color {
    background: #ffffff !important;

    .head-nav {
      background: #ffffff !important;
    }

    .head-search {
      background: #ffffff !important;
    }
  }

  .head-nav {
    background: linear-gradient(179deg, #4ec2ff 0%, #7be1dc 100%);
    background: transparent;

    .head-nav-left-box {
      width: 270rpx;

      image {
        width: 36rpx;
        height: 36rpx;
      }

      .nav-left-text {
        margin-left: 6rpx;
        flex: 1;

        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #222222;
      }
    }
  }

  .head-search {
    height: 104rpx;
    padding: 20rpx 30rpx;
    background: #ffffff;

    .search-box {
      width: 100%;
      height: 72rpx;
      background: #f6fafd;
      box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
      // box-shadow: none;
      border-radius: 36rpx 36rpx 36rpx 36rpx;
      padding: 0 24rpx;
      display: flex;
      align-items: center;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 22rpx;
      }

      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #838b9e;
      }

      .btn {
        width: 112rpx;
        height: 48rpx;
        background: #cb0011;
        border-radius: 24rpx 24rpx 24rpx 24rpx;

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #ffffff;
      }
    }
  }
}

// 设置标题左对齐
.head-search-wrap {
  height: 100rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #ffffff;

  .head-search {
    width: 100%;
    height: 100rpx;
    padding: 20rpx 30rpx;
    background: linear-gradient(
      180deg,
      #7be1dc 0%,
      rgba(123, 225, 220, 0) 96%,
      rgba(123, 225, 220, 0) 100%
    );
    background: #ffffff;

    .search-box {
      width: 100%;
      height: 60rpx;
      padding: 0 30rpx;
      background: linear-gradient(180deg, #ecfaf9 0%, #ffffff 100%);
      background: #f5f5f5;
      // box-shadow: 0rpx 10rpx 20rpx 1rpx rgba(5, 57, 55, 0.08);
      border-radius: 32rpx 32rpx 32rpx 32rpx;

      image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 22rpx;
      }

      text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
      }
    }
  }

  .head-search-input-wrap {
    padding: 20rpx 20rpx;
    background-color: #fff;
  }

  ::v-deep .uicon-search {
    font-size: 40rpx !important;
  }
}

.page {
  width: 100%;
  height: 100%;
  .page-ctx {
    width: 100%;
    display: flex;
    .page-ctx-inner {
      flex: 1;
      display: flex;
      // margin-top: 20rpx;
    }
  }
}

.left-cate-view {
  width: 176rpx;
  box-sizing: border-box;
  overflow: auto;
  height: 100%;
  background: #ffffff;

  .cate-item {
    min-height: 96rpx;

    // background: #FFFFFF;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;

    .cate-title {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 4rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
    }
  }

  .cate-item-active {
    position: relative;
    background: #f6f6f6;

    font-weight: bold;
    font-size: 28rpx;
    color: #f49c0d;

    .cate-title {
      font-weight: bold;
      font-size: 28rpx;
      color: #f49c0d;
    }
  }

  .cate-item-active::before {
    content: "";
    position: absolute;
    // border-left: 4px solid #3bd072;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);

    width: 4rpx;
    height: 40rpx;
    background: #f49c0d;
  }
}

.right-container {
  height: 100%;
  padding-bottom: 160rpx;
  overflow: auto;
  /* top:110rpx; */
}

.page-view {
  .class-item {
    margin-bottom: 10rpx;
    border-radius: 8rpx;

    .right-cat-title {
      height: 100rpx;
      line-height: 100rpx;
      padding: 0 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
    }

    .item-container {
      display: flex;
      flex-direction: column;
      margin: 0 0 0 0;

      .thumb-box {
        display: flex;
        flex-direction: row;
        padding: 32rpx 24rpx;
        background: #fff;
        margin-bottom: 16rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;

        .item-menu-image {
          position: relative;
          width: 168rpx;
          height: 168rpx;
          border-radius: 8rpx 8rpx 0rpx 0rpx;

          image {
            width: 100%;
            height: 100%;
          }

          .m-item-img-over {
            position: absolute;
            width: 168rpx;
            height: 168rpx;
            top: 0;
            left: 0;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .thumb-box-right {
        }
      }
    }
  }
}

.product-list {
  padding-left: 30rpx;

  .product-item {
    padding: 40rpx 24rpx;
    // border-bottom: 1rpx solid #EEEEEE;
    background: #ffffff;
    margin-bottom: 16rpx;
    display: flex;

    /* align-items: center; */
    .poster-box {
      width: 136rpx;
      height: 136rpx;
      border-radius: 8rpx;
      overflow: hidden;

      .poster {
        width: 136rpx;
        height: 136rpx;
      }
    }

    .info-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      padding-left: 24rpx;

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #222222;
      }

      .desc-box {
        margin-top: 8rpx;
        /* height: 30rpx; */

        .desc {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #838b9e;
        }
      }

      .price-box {
        margin-top: 18rpx;

        .price-info {
          font-weight: bold;
          font-size: 24rpx;
          color: #e23410;
        }

        .add-box {
          width: 32rpx;
          height: 32rpx;

          & > image {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }
}

/deep/.info-modal-inner {
  // padding-bottom: 180rpx !important;
}
</style>
